<template>
<div class="common-layout">
<el-container>
      <el-aside width="200px">
      <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
     <div align="center"> <img src="../assets/log.png"></div>
       <el-menu-item index="1"><i class="el-icon-odometer"></i><router-link to="/ybp"> 仪表盘</router-link></el-menu-item>
        <el-sub-menu index="2-1">
          <template #title>
          <i class="el-icon-menu"></i>
            <span>常用设置</span>
          </template>
            <el-menu-item index="1-1"><router-link to="/jsgl">教师管理</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/xsgl">学生管理</router-link></el-menu-item>
            <el-menu-item index="1-3"><router-link to="/gggl">公告管理</router-link></el-menu-item>
            <el-menu-item index="1-4"><router-link to="/xtpz">系统配置</router-link></el-menu-item>
            <el-menu-item index="1-5"><router-link to="/pdfwq">判题服务器</router-link></el-menu-item>
        </el-sub-menu>
      </el-menu>


      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="2-2">
          <template #title>
            <i class="el-icon-aim"></i>
            <span>问题</span>
          </template>
                      <el-menu-item index="1-1"><router-link to="/wtlb">问题列表</router-link></el-menu-item>
                      <el-menu-item index="1-2"><router-link to="/zjtm">增加题目</router-link></el-menu-item>
                      <el-menu-item index="1-3"><router-link to="/drdctm">导入导出题目</router-link></el-menu-item>
        </el-sub-menu>
      </el-menu>

<el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="2-3">
          <template #title>
            <i class="el-icon-trophy"></i>
            <span>比赛&练习</span>
          </template>
          <el-menu-item index="1-1"><router-link to="/bslb">比赛列表</router-link></el-menu-item>
          <el-menu-item index="1-2"><router-link to="/cjbs">创建比赛</router-link></el-menu-item>
        </el-sub-menu>
      </el-menu>

      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="2-4">
          <template #title>
            <i class="el-icon-collection"></i>
            <span>课程</span>
          </template>
          
          <el-menu-item index="1-1"><router-link to="/kclb">课程列表</router-link></el-menu-item>
          <el-menu-item index="1-2"><router-link to="/cjkc">创建课程</router-link></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
      </el-aside>
      <el-container>
        <el-header>
          
          <el-menu
          :default-active="activeIndex2"
          background-color="#F9FAFC"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          
      >
      <el-col :span="19">&nbsp;</el-col>
        <el-sub-menu index="3">
          <template #title>
          <i class="el-icon-search"></i>
          <i class="el-icon-share"></i>
            <span>username</span>
          </template>
          <el-menu-item index="1-1">logout</el-menu-item>
        </el-sub-menu>
      </el-menu>
      
        </el-header>
        <el-main>
         <router-view></router-view>
        </el-main>
        <el-footer>Build Verion:20210929bd</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    }
}
</script>

<style>
.el-header{
  background-color: #F9FAFC;

}
.el-footer {
  background-color: #EDECEC;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #EDECEC;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 20px;
  height:500px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
img{
  width:50%;
}

.card-header {
  display: flex;
  
  align-items: center;
  height:10px;
}

.box-card {
  height: 50%;
}
</style>